<template>
  <div class="echarts-box">
    <div id="myEcharts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";

export default {
  name: "App",
  props: ["width", "height"],
  setup() {
    let myEcharts = echarts;

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      myEcharts.dispose;
    });

    function initChart() {
      let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
      chart.setOption({
        grid: {
          top: '20%',
          left: '1%',
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },

          data: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
          ]
        },
        tooltip: {
          trigger: "axis"
        },
        yAxis: {
          type: "value",
          // max: 20,
          min: 'dataMin',
          splitLine: {
            show: false
          },
          splitNumber: 2

        },
        series: [
          {
            data: [
              3, 7.5, 8.6, 9.1, 9.8, 11, 10, 8, 9.5, 7.3, 6.8, 9.8
            ],
            type: "line",
            symbol: 'none',
            lineStyle: {
              color: "RGB(0, 0, 0)",
              width: 1
            },
            smooth: true,
            showSymbol: false,
          }
        ]
      });
      window.onresize = function () {
        chart.resize();
      };
    }

    return {
      initChart
    };
  }
};
</script>

<style scoped lang="less">
.echarts-box,
#myEcharts {
  width: 100%;
  height: 100px;
}
</style>